<template>
    <div class="band">
        <div class="band-cont" v-for="(item,index) in bandList" :key="index">
            <a href="javascript:;">
                <div class="band-num">
                    <span class="num-detail" v-if="index > 2">{{ index + 1 }}</span>
                    <span class="num-pic" v-else>
                        <img :src="'/static/images/news/no'+ index +'.png'" alt="">
                    </span>
                </div>
                <div class="band-content">
                    <span class="name">{{ item.release_name }}</span>
                    <h3 class="title">{{ item.title }}</h3>
                    <ul class="band-list">
                        <li class="read">阅读  {{ item.count_read }}</li>
                        <li class="like">赞  {{ item.count_like }}</li>
                        <li class="time">{{ item.publish_time }}</li>
                    </ul>
                </div>
            </a>
        </div>
    </div>
</template>

<script>
export default {
    props: ['bandList']
}
</script>

<style>
.band .band-cont {
    padding: 0.3rem 0;
    border-bottom: 1px solid rgba(240,242,245,1);
}
.band .band-cont a {
    display: flex;
    justify-content: space-between;
}
.band .band-cont a .band-num span {
    display: block;
    width: 0.6rem;
    height: 0.6rem;
}
.band .band-cont a .band-num span.num-detail {
    background-color:rgba(240,242,245,1);
    font-size: 0.28rem;
    font-family:LucidaGrande-Bold;
    font-weight:bold;
    color:rgba(120,120,120,1);
    line-height: 0.6rem;
    text-align: center;
    border-radius: 50%;
}
.band .band-cont a .band-num span.num-pic {
    height: 0.66rem;
}
.band .band-cont a .band-num span.num-pic img {
    width: 100%;
    height: 100%;
}
.band .band-cont a .band-content {
    flex: 1;
    width: 6rem;
    margin-left: 0.28rem;
}
.band .band-cont a .band-content .name {
    font-size: 0.28rem;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(120,120,120,1);
    line-height: 0.4rem;
}
.band .band-cont a .band-content .title {
    font-size: 0.34rem;
    font-family:PingFangSC-Medium;
    font-weight:500;
    color:rgba(51,51,51,1);
    line-height: 0.48rem;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    padding-top: 0.06rem;
    padding-bottom: 0.2rem;
}
.band .band-cont a .band-content .band-list {
    display: flex;
}
.band .band-cont a .band-content .band-list li {
    font-size: 0.26rem;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(176,176,185,1);
    line-height: 0.37rem;
}
.band .band-cont a .band-content .band-list li.read {
    width: 30%;
}
.band .band-cont a .band-content .band-list li.like {
    width: 40%;
}
</style>
